{% extends 'base/base.html' %}
{% load static %}
{% load i18n %}
{% load allauth %}

{% block title %}重置密码 - 妙趣拾光锦盒{% endblock %}

{% block extra_css %}
<style>
    .password-page {
        background-image: linear-gradient(135deg, #f5f7fa 0%, #e4efe9 100%);
        border-radius: 15px;
        padding: 30px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    }
    
    .password-card {
        border: none;
        box-shadow: 0 5px 15px rgba(163, 112, 247, 0.1);
        transition: all 0.3s ease;
    }
    
    .password-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(163, 112, 247, 0.15);
    }
    
    .password-header {
        background: linear-gradient(135deg, #a370f7 0%, #ff9fc6 100%);
        color: white;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        padding: 15px 20px;
    }
    
    .password-header h5 {
        margin: 0;
        font-weight: 600;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    
    .btn-primary {
        background: linear-gradient(135deg, #a370f7, #ff9fc6);
        border: none;
        box-shadow: 0 4px 10px rgba(163, 112, 247, 0.3);
    }
    
    .btn-primary:hover {
        background: linear-gradient(135deg, #995de7, #ff8ab9);
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(163, 112, 247, 0.4);
    }
    
    .form-control {
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        padding: 12px 15px;
        transition: all 0.3s;
    }
    
    .form-control:focus {
        border-color: #a370f7;
        box-shadow: 0 0 0 0.25rem rgba(163, 112, 247, 0.25);
    }
    
    .form-label {
        font-weight: 500;
        color: #555;
        margin-bottom: 8px;
    }
    
    .errorlist {
        color: #e74c3c;
        padding-left: 20px;
        margin-top: 5px;
        font-size: 0.9rem;
    }
    
    .key-icon {
        font-size: 4rem;
        background: linear-gradient(135deg, #a370f7, #ff9fc6);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-bottom: 20px;
    }
    
    .password-error {
        background-color: rgba(231, 76, 60, 0.1);
        border-radius: 8px;
        padding: 20px;
        margin: 20px 0;
        text-align: center;
    }
    
    .password-error i {
        color: #e74c3c;
        font-size: 2rem;
        margin-bottom: 15px;
    }
    
    .password-error p {
        color: #444;
    }
    
    .password-tips {
        background-color: rgba(163, 112, 247, 0.05);
        border-radius: 8px;
        padding: 15px;
        margin-top: 25px;
    }
    
    .password-tips h6 {
        color: #a370f7;
        font-weight: 600;
        margin-bottom: 10px;
    }
    
    .password-tips ul {
        text-align: left;
        padding-left: 25px;
        color: #666;
    }
</style>
{% endblock %}

{% block content %}
<section class="py-5">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="password-page">
                    <div class="card password-card">
                        <div class="card-header password-header">
                            <h5 class="mb-0"><i class="fas fa-key me-2"></i>{% if token_fail %}链接失效{% else %}设置新密码{% endif %}</h5>
                        </div>
                        <div class="card-body p-4">
                            <div class="text-center">
                                <i class="fas {% if token_fail %}fa-exclamation-triangle{% else %}fa-unlock-alt{% endif %} key-icon"></i>
                                <h3 class="mb-3 fw-bold">{% if token_fail %}重置链接无效{% else %}设置新密码{% endif %}</h3>
                                
                                {% if token_fail %}
                                    <div class="password-error">
                                        <i class="fas fa-exclamation-circle"></i>
                                        <p>{% trans "您点击的密码重置链接已经失效或已被使用。" %}</p>
                                        <p>{% trans "请尝试重新申请密码重置。" %}</p>
                                    </div>
                                    <div class="mt-4">
                                        <a href="{% url 'account_reset_password' %}" class="btn btn-primary">
                                            <i class="fas fa-redo me-2"></i>{% trans "重新申请密码重置" %}
                                        </a>
                                    </div>
                                {% else %}
                                    {% if form %}
                                        <form method="POST" action="{{ action_url }}">
                                            {% csrf_token %}
                                            
                                            {% if form.non_field_errors %}
                                                <div class="alert alert-danger" role="alert">
                                                    {% for error in form.non_field_errors %}
                                                        {{ error }}
                                                    {% endfor %}
                                                </div>
                                            {% endif %}
                                            
                                            <div class="mb-4">
                                                <label for="{{ form.password1.id_for_label }}" class="form-label">{% trans "新密码" %}</label>
                                                <div class="input-group">
                                                    <span class="input-group-text"><i class="fas fa-lock"></i></span>
                                                    {{ form.password1 }}
                                                </div>
                                                {% if form.password1.errors %}
                                                    <ul class="errorlist">
                                                        {% for error in form.password1.errors %}
                                                            <li>{{ error }}</li>
                                                        {% endfor %}
                                                    </ul>
                                                {% endif %}
                                                {% if form.password1.help_text %}
                                                    <small class="form-text text-muted">{{ form.password1.help_text }}</small>
                                                {% endif %}
                                            </div>
                                            
                                            <div class="mb-4">
                                                <label for="{{ form.password2.id_for_label }}" class="form-label">{% trans "确认新密码" %}</label>
                                                <div class="input-group">
                                                    <span class="input-group-text"><i class="fas fa-lock"></i></span>
                                                    {{ form.password2 }}
                                                </div>
                                                {% if form.password2.errors %}
                                                    <ul class="errorlist">
                                                        {% for error in form.password2.errors %}
                                                            <li>{{ error }}</li>
                                                        {% endfor %}
                                                    </ul>
                                                {% endif %}
                                                {% if form.password2.help_text %}
                                                    <small class="form-text text-muted">{{ form.password2.help_text }}</small>
                                                {% endif %}
                                            </div>
                                            
                                            <div class="password-tips">
                                                <h6><i class="fas fa-shield-alt me-2"></i>为了您的账户安全：</h6>
                                                <ul>
                                                    <li>密码长度至少8位</li>
                                                    <li>尽量包含大小写字母、数字和特殊符号</li>
                                                    <li>避免使用与其他网站相同的密码</li>
                                                    <li>不要使用容易被猜到的密码，如生日、姓名等</li>
                                                </ul>
                                            </div>
                                            
                                            <div class="d-grid gap-2 mt-4">
                                                <button type="submit" class="btn btn-primary">
                                                    <i class="fas fa-check-circle me-2"></i>{% trans "确认更改" %}
                                                </button>
                                            </div>
                                        </form>
                                    {% else %}
                                        <div class="password-error">
                                            <i class="fas fa-exclamation-circle"></i>
                                            <p>{% trans "抱歉，出现了一些问题。" %}</p>
                                        </div>
                                        <div class="mt-4">
                                            <a href="{% url 'account_reset_password' %}" class="btn btn-primary">
                                                <i class="fas fa-redo me-2"></i>{% trans "重新申请密码重置" %}
                                            </a>
                                        </div>
                                    {% endif %}
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %} 